@import (reference) 'config';

.asset-logo,
w-asset-logo {
  position: relative;

  &.marker-hide {
    .marker {
      opacity: 0;
    }
  }

  &.big {
    .marker {
      width: 24px;
      height: 24px;
      background-size: 12px;
      border: 2px solid @color-white;
    }
  }

  &_new {
    cursor: pointer;
    user-select: none;
  }
}

.asset {
  &__logo {
    background-size: 100% 100%;
    text-align: center;
    border-radius: 50%;
    color: @white-only;
    left: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &-custom,
    &.custom {
      .marker {
        background-color: @custom-asset-marker-bg;
      }
    }

    .marker {
      display: none;
      width: 15px;
      height: 15px;
      position: absolute;
      bottom: -2px;
      right: -2px;
      border: 2px solid @color-white;
      border-radius: 50%;
      background-position: center;
      background-repeat: no-repeat;
    }

    &.little {
      .marker {
        display: none;
      }
    }
  }
}

.smart-asset {
  background-image: url(/img/icons/smart-asset-marker.svg);
  display: block;
}

.sponsored-asset {
  background-image: url(/img/icons/sponosred-asset-marker.svg);
  display: block;
}

.asset {
  &__logo {
    .marker {
      &.sponsored-asset,
      &.smart-asset {
        display: block;
      }
    }
  }
}

.change-token {
  .sponsored-asset,
  .smart-asset {
    .marker {
      display: block;
      width: 24px;
      height: 24px;
      background-size: 12px;
      border: 2px solid @color-white;
    }
  }
}
